<template>
    <div class="module-name pl10 pr10 ">
        <!-- 快捷搜索 -->

        <el-tabs v-model="tabIndex" @tab-click="clickTabs" :style="{ height: tabbars.length > 0 ? '56px' : '30px' }">
            <el-tab-pane :label="tab.name + (tab.num ? `(${tab.num})` : '')" :key="tabI" v-for="(tab, tabI) in tabbars"></el-tab-pane>
        </el-tabs>

        <avue-crud v-model="dialogForm" :table-loading="loading" :data="data" :option="option" @on-load="onLoad"
                   @search-change="handleSearchChange"
                   :search.sync="searchForm">
            <!-- 自定义菜单-->
            <template slot-scope="scope" slot="menuRight">
                <sc-pop-button title="点击确认同步数据" type="primary" size="mini">同步</sc-pop-button>
                <el-button type="warning" size="mini">数据源</el-button>
            </template>

            <!--row插槽-->
            <template slot-scope="{row}" slot="status">
                <el-tag>{{ row.status === 1 ? '正常' : '不正常' }}</el-tag>
            </template>
            <template slot="cover" slot-scope="scope">
                <div class="media">
                    <img :src="scope.row.cover" style="width: 50px; border-radius: 3px"/>
                </div>
            </template>

            <!--自定义操作栏-->
            <template slot-scope="{type,size}" slot="menu">
                <el-button type="text" size="mini">业务功能</el-button>
                <el-button type="text" size="mini">学校设备</el-button>
                <el-button type="text" size="mini" @click="$router.push({ path: '/school_config/school_list/data_sync' })">数据同步</el-button>
            </template>

            <!--自定义表单-->
            <template slot-scope="{value,type,disabled}" slot="coverForm">
                <sc-upload v-if="type==='edit'" @on-change="selectUploadImg" :echoFileList="echoFileList"></sc-upload>
                <sc-upload v-else-if="type==='add'" @on-change="selectUploadImg"></sc-upload>
                <img v-else style="width: 200px" :src="value" @click="$imgView(value)"></img>
            </template>
            <template slot-scope="{value,type,disabled}" slot="statusForm">
                <el-tag>{{ value === 1 ? '正常' : '不正常' }}</el-tag>
            </template>
        </avue-crud>


    </div>
</template>
<script>
import noPage from "admin/mixins/noPage";

export default {
    name: "module-name",
    mixins: [noPage],
    data() {
        return {
            tabIndex: 0,
            tabbars: [
                // {name: "全部", status: '', num: 1000},
                // {name: "启用", status: 1, num: 500},
                // {name: "停用", status: 0, num: 500}
            ],


            //分页参数
            searchForm: {},
            urls: {
                0: "schoolConfig",
                1: "classCircleList",
                2: "handleDelete"
            },

            data: [],
            option: {
                ...window.avueCrud,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                // 列设置
                clearExclude: ["schoolName"], //搜索不清空
                column: [
                    {
                        hide: true,
                        label: "学校",
                        prop: "schoolName",
                        search: true,
                        order: 1,
                        searchSpan: 5,
                        searchLabelWidth: 50,
                        type: "select",
                        props: {
                            label: "schoolName",
                            value: "id",
                        },
                        searchLable: "schoolId",
                        searchValue: this.$store.state.team.currTeam.schoolName,
                        dicData: this.$store.state.team.teams,
                        editDisplay: false,
                        addDisplay: false,
                        viewDisplay: false,
                        change: (param) => {
                            this.searchForm.levelId = "";
                        },
                    },
                    {
                        label: '地址',
                        prop: 'location',
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入地址",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '联系人',
                        prop: 'people',
                    },
                    {
                        label: '联系方式',
                        prop: 'phone',
                    },
                    {
                        label: '封面图',
                        prop: 'cover',
                        //自定义表单
                        span: 24,
                        formslot: true,
                        labelslot: true,
                        errorslot: true,

                    },
                    {
                        label: '状态',
                        prop: 'status',
                        slot: true,
                        editDisplay: false,
                        addDisplay: false
                    },

                ],
            },

            dialogForm: {},
            echoFileList: [
                {name: "food.jpeg", url: "https://img0.baidu.com/it/u=2130615794,142753515&fm=26&fmt=auto"}
            ], //回显图片数据

        };
    },
    methods: {
        /**
         * 获取数据完成回调
         * @param resData 接口返回的data
         * @returns {Promise<void>}
         */
        async dataCallBack(resData) {
            let data = []
            for (let j = 0; j < this.page.pageSize; j++) {
                data.push({
                    id: j,
                    schoolName: "望夏雨",
                    location: "北京市",
                    people: "撒打算",
                    phone: "13522322233",
                    cover: "https://img2.baidu.com/it/u=1451639315,168990875&fm=26&fmt=auto",
                    status: 1,
                });
            }
            this.data = data
        },
        //选择图片触发
        selectUploadImg(files) {
            console.log("files :>> ", files);
        },
        // 点击导航栏目
        clickTabs() {
            this.searchForm.status = this.tabbars[+this.tabIndex].status;
            this.searchForm.page = 1
            this.page.currentPage = 1
            this.getData(this.searchForm)
            console.log("this.searchForm", this.searchForm)
        },
    }
};
</script>

<style lang="scss" scoped>
.module-name {
}
</style>
